<template>
  <div class="roleManage">
    <basic-container>
      <div>
        <m-s-search
            @searchClick="
            (v) => {
              (queryForm = v), getList();
            }
          "
            :list="roleManageConfigOption.column"
        >
        </m-s-search>
      </div>
      <avue-crud
          :option="roleManageConfigOption"
          :data="data"
          :table-loading="loading"
          :page.sync="page"
          @current-change="currentChange"
          @size-change="sizeChange"
          @selection-change="(v) => (selection = v)"
          ref="curd"
      >
        <template slot="menuLeft">
          <el-button
              size="small"
              type="primary"
              @click="
              addToTabsList('角色', { oid: -1 }, 'roleManageTemp', 'open')
            "
          >新增
          </el-button>
          <el-button
              size="small"
              :disabled="selection.length === 0"
              @click="remove(selection)"
          >删除
          </el-button
          >
          <el-button
              size="small"
              :disabled="selection.length === 0"
              @click="start_stop(selection, 'start')"
          >启用
          </el-button
          >
          <el-button
              size="small"
              :disabled="selection.length === 0"
              @click="start_stop(selection, 'stop')"
          >停用
          </el-button
          >
        </template>
        <template slot-scope="{ row }" slot="type">
          <span>
            {{ getTypeName(row.type) }}
          </span>
        </template>
        <template slot-scope="{ row }" slot="state">
          <span>
            {{ Number(row.state) === 1 ? "启用" : "停用" }}
          </span>
        </template>
        <template slot="menu" slot-scope="{ row }">
          <el-button
              type="text"
              @click="addToTabsList('角色', row, 'roleManageTemp', 'view')"
          >
            查看详情
          </el-button>
          <el-button
              type="text"
              @click="addToTabsList('角色', row, 'roleManageTemp', 'edit')"
          >
            修改
          </el-button>
          <el-button
              type="text"
              v-if="Number(row.state) === 1"
              @click="changeState(row, 'stop')"
          >
            停用
          </el-button
          >
          <el-button type="text" v-else @click="changeState(row, 'start')">
            启用
          </el-button
          >
        </template>
      </avue-crud>
      <ms-drawer
          @refresh="getList()"
          ref="md"
          :visible.sync="visible"
          :tab-list.sync="tabsList"
      ></ms-drawer>
    </basic-container>
  </div>
</template>

<script>
import commonJs from "@/util/commonJs";
import * as roleApi from "@/api/roleManage/roleManage";
import MSSearch from "@/DMDComponents/MSSearch.vue";

export default {
  name: "roleManage",
  mixins: [commonJs],
  inject: ["roleManageConfigOption"],
  components: {MSSearch},
  data() {
    return {
      typeList: [
        {
          oid: 3,
          name: "系统角色",
        },
        {
          oid: 2,
          name: "团队角色",
        },
      ],
    };
  },
  methods: {
    getTypeName(type) {
      let name = "";
      if (type || type === 0) {
        const [selected] = this.typeList.filter((v) => v.oid === Number(type));
        name = selected && selected.name;
      }
      return name;
    },
    // 启用/停用
    changeState(data, type) {
      let msg = type === "start" ? "启用成功" : "停用成功";
      roleApi[type]({ids: data.pid}).then(() => {
        this.$message.success(msg);
        this.getList();
      });
    },
  },
};
</script>
